<template>
  <div class="popup2">
    <div class="popHead">
      <div class="headLeft" @click='closePop'></div>
      <div class="search">
        <img src="../../assets/image/carProduct/search1.png" />
        <input type="text" placeholder="请输入搜索的商品" v-model='inputVal'/>
      </div>
      <div class="popSearch" @click='searchCarPro(inputVal)'>搜索</div>
    </div>
    <div class="hotSearch">
      <h1>热门搜索</h1>
      <div class="allHot">
        <span v-for='item in hotSear' @click='searchCarPro(item.KEYWORD)'>{{item.KEYWORD}}</span>
      </div>
    </div>
    <div class="history" v-if='historyArr.length>0'>
      <h1>历史记录</h1>
      <ul>
        <li @click='searchCarPro(item)' v-for='item in historyArr'>{{item}}</li>
      </ul>
    </div>
    <div class="clearHidtory" @click='clearHidtory' v-if='historyArr.length>0'>
      清除历史记录
    </div>
  </div>
</template>
<script>
/*搜索*/
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"maintainHome",
  // 数据
  data(){

    return{
    	userId:'',
    	inputVal:'',
    	hotSear:'',  //热门搜索
    	historyArr:[],  //历史记录
    	searchVal:''  //搜索字段
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
    if(localStorage.getItem('searchHis')){
      this.historyArr=JSON.parse(localStorage.getItem('searchHis'));
    }
    this.getHot();
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    //返回操作
    closePop(){
      this.$router.go(-1);
    },
    //搜索方法
    searchCarPro(keyWord){
      if(keyWord==''){
        this.$vux.alert.show({
            title: '提示',
            content: '请选择搜索内容'
        })
        return;
      }
      this.$vux.loading.show({
       text: '搜索中...'
      })
      this.$fetchPost('/searchAction/servSearch.action',{KEY_WORDS:keyWord}).then(res=>{
          if(res.STATUS_CODE==1){
            this.searchVal=keyWord;
            this.$vux.loading.hide();
            this.addHistory();//添加历史记录
            sessionStorage.setItem('productList',JSON.stringify(res));
            this.$router.push('/productList');
          }
        },err=>{
          console.log(err);
      })
    },
    //清理历史记录
    clearHidtory(){
      this.historyArr=[];
      localStorage.removeItem('searchHis');
    },
    //添加历史记录
    addHistory(){
      if(localStorage.getItem('searchHis')){
          let arr=JSON.parse(localStorage.getItem('searchHis'));
          let flag=false;
          for(let i=0;i<arr.length;i++){
            if(arr[i]===this.searchVal){
              flag=true;
              break;
            }
          }
          if(!flag){
            this.historyArr.push(this.searchVal);
            localStorage.setItem('searchHis',JSON.stringify(this.historyArr));
          }
        }else{
          this.historyArr.push(this.searchVal);
          localStorage.setItem('searchHis',JSON.stringify(this.historyArr));
        }
    },
    //获取热门搜索
    getHot(){
        this.$fetchPost('/searchAction/servSearch.action',{KEY_WORDS:''}).then(res=>{
          if(res.STATUS_CODE==1){
            this.hotSear=res.KEYWORDS;
          }
        },err=>{
          console.log(err);
        })
    }
  },
  // 子组件
  components:{
    
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.popup2{
	min-height: 100%;
	background: #EDEDED;
    .popHead{
      width: 7.5rem;
      height: 0.9rem;
      background: #F5F5F9 100%;
      .borderBFu(#d9d9d9);
      padding: 0.1rem 0;
      display: flex;
      .headLeft{
        margin: 0.19rem 0.2rem 0.19rem 0.3rem;
        width: 0.3rem;
        height: 0.3rem;
        border:1px solid #999;
        border-width: 0px 0 1px 1px;
        transform:rotate(45deg);
      }
      .search{
        display: flex;
        width: 5.7rem;
        justify-content:center;
        align-items:center;
        background: #fff;
        border-radius: 0.1rem;
        .borderFu(#D9D9D9,0.2rem);
        input{
          border: 0;
          background: #fff;
          margin-left: 0.1rem;
          width: 5rem;
          display: block;
          height:0.55rem;
          outline: medium;
          margin-top: 0.03rem;
          font-size: 0.26rem;
          position: relative;
          z-index: 999;
        }
        img{
          width: 0.3rem;
          height: 0.3rem;
        }
      }
      .popSearch{
        font-size: 0.3rem;
        line-height: 0.7rem;
        padding-left: 0.15rem;
      }
    }
    .hotSearch{
      background: #f6f6f9;
      padding-left: 0.2rem;
      margin-top: 0.2rem;
      h1{
        font-size: 0.3rem;
        text-align: left;
        color: #666;
        height: 0.8rem;
        line-height: 0.8rem;
        .borderBFu(#D9D9D9);
      }
      .allHot{
        display: flex;
        flex-wrap:wrap;
        padding: 0.2rem 0;
        span{
          font-size: 0.22rem;
          background: #fff;
          padding: 0.13rem;
          border-radius: 0.1rem;
          margin: 0.05rem 0.1rem;
          color:#959595;
          .borderFu(#D9D9D9,0.2rem);
        }
      }
    }
    .history{
      background: #f6f6f9;
      margin-top: 0.2rem;
      h1{
        font-size: 0.3rem;
        text-align: left;
        color: #a5a5a5;
        height: 0.8rem;
        line-height: 0.8rem;
        margin-left: 0.2rem;

        .borderBFu(#959595);
      }
      ul{
        li{
          font-size: 0.26rem;
          height: 0.75rem;
          line-height: 0.75rem;
          text-align: left;
          padding-left: 0.3rem;
          color: #292929 100%;
          .borderBFu(#ccc);
        }
        li:last-child{
          .borderBFu(#f6f6f9);
        }
      }
    }
    .clearHidtory{
      background: #f6f6f9;
      height: 0.8rem;
      line-height: 0.8rem;
      font-size: 0.3rem;
      color: #292929 100%;
      margin-top: 0.4rem;
    }
  }
</style>